{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Generate Report</title>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap-table.min.css">
    <style>
        /* 移动端优化样式 */
        @media (max-width: 768px) {
            .form-control, .form-select {
                font-size: 16px; /* 增大字体大小 */
                padding: 12px; /* 增加内边距 */
                margin-bottom: 30px; /* 增加元素间距 */
            }

            .btn {
                width: 100%; /* 按钮宽度占满容器 */
                padding: 15px; /* 增加按钮内边距 */
                font-size: 18px; /* 增大按钮字体 */
                margin-top: 20px; /* 增加按钮上边距 */
            }

            .container {
                padding: 15px; /* 增加容器内边距 */
            }

            h1 {
                font-size: 24px; /* 调整标题大小 */
                margin-bottom: 30px; /* 增加标题下边距 */
            }

            h3 {
                font-size: 20px; /* 调整子标题大小 */
                margin-bottom: 20px; /* 增加子标题下边距 */
            }

            .navbar-header {
                float: none;
            }

            .navbar-left, .navbar-right {
                float: none !important;
            }

            .navbar-toggle {
                display: block;
            }

            .navbar-collapse {
                border-top: 1px solid transparent;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
            }

            .navbar-fixed-top {
                top: 0;
                border-width: 0 0 1px;
            }

            .navbar-collapse.collapse {
                display: none !important;
            }

            .navbar-nav {
                float: none !important;
                margin-top: 7.5px;
            }

            .navbar-nav > li {
                float: none;
            }

            .navbar-nav > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .collapse.in {
                display: block !important;
            }
        }
    </style>
</head>
<body>

<div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="/static/img/2.png" style="width: 200px;height: 18px;">
                </a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{% url 'select_department' %}">录入信息</a></li>
                    <li><a href="{% url 'report_list' %}">证书列表</a></li>
                    {% if current_user.role == 'admin' %}
                        <li><a href="{% url 'user_management' %}">用户管理</a></li>
                        <li><a href="{% url 'all_report_list' %}">所有报告</a></li>
                        <li><a href="{% url 'edit_config' %}">编辑配置文件</a></li>
                    {% endif %}
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">{{ current_user.username }} <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/logout/">logout</a></li>
                            <li><a href="/account_info/">账户信息</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->

        </div><!-- /.container-fluid -->
    </nav>
</div>

{% block content %} {% endblock %}
<!-- 添加模板容器 -->


<script src="/static/bootstrap/js/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="{% static 'bootstrap/js/bootstrap-table.min.js' %}"></script>
<script src="{% static 'bootstrap/js/FileSaver.min.js' %}"></script>
<script src="{% static 'bootstrap/js/tableExport.min.js' %}"></script>
<script src="{% static 'bootstrap/js/tableExport.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap-table-export.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap-table-toolbar.min.js' %}"></script>

{% block js %} {% endblock %}
{#<script>#}
{#    $('#instrument_model').change(function () {#}
{#        var instrument_model = $(this).val();#}
{#        $.ajax({#}
{#            url: '/load_template/',#}
{#            method: 'POST',#}
{#            data: {instrument_model: instrument_model},#}
{#            success: function (response) {#}
{#                if (response.template) {#}
{#                    $('#template_container').html(response.template);#}
{#                } else {#}
{#                    alert('Failed to load template');#}
{#                }#}
{#            },#}
{#            error: function () {#}
{#                alert('Error loading template');#}
{#            }#}
{#        });#}
{#    });#}
{##}
{#</script>#}
</body>
</html>